Motion >> Repos - motion-next.git/blob

   1 <div
   2   id="cloudProviders"
   3   class="page-layout simple left-sidenav inner-sidenav motion-list"
   4 >
   5   <!-- HEADER -->
   6   <div
   7     class="header md-accent-bg"
   8     layout="row"
   9     layout-align="space-between center"
  10   >
  11     <!-- APP TITLE -->
  12     <div layout="row" layout-align="start center">
  13       <div class="logo" layout="row" layout-align="start center">
  14         <span class="logo-icon">
  15           <md-icon md-font-icon="icon-cog" class="s24"></md-icon>
  16         </span>
  17         <span class="logo-text" translate="SETTINGS.AITOOLS">AiTools</span>
  18       </div>
  19     </div>
  20     <!-- / APP TITLE -->
  21
  22     <div layout="row">
  23       <!-- SEARCH -->
  24       <div
  25         class="search-input-wrapper"
  26         layout="row"
  27         layout-align="start center"
  28       >
  29         <label for="search">
  30           <md-icon md-font-icon="icon-magnify"></md-icon>
  31         </label>
  32         <md-input-container md-no-float class="m-0">
  33           <input
  34             id="search"
  35             placeholder="Search for anyone"
  36             type="text"
  37             ng-model="vm.query.filter"
  38             ng-model-options="{ debounce: 1000 }"
  39             translate
  40             translate-attr-placeholder="SETTINGS.SEARCH_FOR_ANYONE"
  41           />
  42         </md-input-container>
  43       </div>
  44       <!-- / SEARCH -->
  45     </div>
  46   </div>
  47   <!-- / HEADER -->
  48
  49   <!-- SELECTED BAR -->
  50   <div
  51     ng-show="vm.selectedAiTools.length > 0"
  52     class="selected-bar header animate-slide-down md-accent-bg"
  53     layout="row"
  54     layout-align="start center"
  55   >
  56     <div class="close-button-wrapper" ng-click="vm.selectedAiTools =[]">
  57       <md-button layout="row" layout-align="start center">
  58         <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
  59         <span translate="SETTINGS.BACK">Back</span>
  60       </md-button>
  61     </div>
  62
  63     <div flex layout="row" layout-align="space-between center">
  64       <div>
  65         <span class="selected-cloudProviders-count">
  66           <span>{{vm.selectedAiTools.length}}</span>
  67           <span translate="SETTINGS.SELECTED">selected</span>
  68         </span>
  69
  70         <md-menu class="select-menu" ng-if="!vm.currentThread">
  71           <md-button
  72             class="md-icon-button"
  73             ng-click="$mdMenu.open($event)"
  74             aria-label="multi select toggle"
  75             translate
  76             translate-attr-aria-label="SETTINGS.MULTI_SELECT_TOGGLE"
  77           >
  78             <md-icon md-font-icon="icon-menu-down"></md-icon>
  79           </md-button>
  80           <md-menu-content width="3">
  81             <md-menu-item>
  82               <md-button
  83                 ng-click="vm.selectAllAiTools()"
  84                 translate="SETTINGS.SELECT_ALL"
  85               >
  86                 Select all
  87               </md-button>
  88             </md-menu-item>
  89             <md-menu-item>
  90               <md-button
  91                 ng-click="vm.deselectAiTools()"
  92                 translate="SETTINGS.SELECT_NONE"
  93               >
  94                 Select none
  95               </md-button>
  96             </md-menu-item>
  97           </md-menu-content>
  98         </md-menu>
  99       </div>
 100
 101       <div class="multi-select-actions">
 102         <button
 103           class="md-icon-button"
 104           ng-csv="vm.exportSelectedAiTools"
 105           csv-label="true"
 106           filename="cloudProviders.csv"
 107         >
 108           <md-icon md-font-icon="icon-file-excel"></md-icon>
 109         </button>
 110         <md-button
 111           class="md-icon-button"
 112           ng-click="vm.deleteSelectedAiTools($event)"
 113           aria-label="delete selected"
 114           translate
 115           translate-attr-label="SETTINGS.DELETE_SELECTED"
 116         >
 117           <md-icon md-font-icon="icon-delete"></md-icon>
 118         </md-button>
 119       </div>
 120     </div>
 121   </div>
 122   <!-- / SELECTED BAR -->
 123
 124   <!-- CONTENT -->
 125   <div class="content" md-background-bg layout="row" layout-align="start start">
 126     <!-- MAIN -->
 127     <div class="main scrollable" ms-scroll>
 128       <!-- CLOUDPROVIDER TABLE -->
 129       <md-card>
 130         <md-table-container>
 131           <table
 132             md-table
 133             md-row-select
 134             multiple
 135             ng-model="vm.selectedAiTools"
 136             md-progress="vm.promise"
 137           >
 138             <thead
 139               md-head
 140               md-order="vm.query.sort"
 141               md-on-reorder="vm.getAiTools"
 142             >
 143               <tr md-row>
 144                 <th
 145                   md-column
 146                   ng-if="vm.table == 'users' || vm.table == 'agents'"
 147                   width="20px"
 148                 ></th>
 149                 <th md-column md-order-by="id">
 150                   {{ 'SETTINGS.ID' | translate }}
 151                 </th>
 152                 <th md-column md-order-by="name">
 153                   {{ 'SETTINGS.NAME' | translate }}
 154                 </th>
 155                 <th md-column md-order-by="service">
 156                   {{ 'SETTINGS.SERVICE' | translate }}
 157                 </th>
 158                 <th md-column width="10px"></th>
 159               </tr>
 160             </thead>
 161             <tbody md-body>
 162               <tr md-row ng-hide="vm.cloudProviders.rows.length">
 163                 <td md-cell colspan="4">
 164                   <div layout="row" layout-align="center center">
 165                     <span translate="SETTINGS.NO_AVAILABLE_INFO"
 166                       >No Available Info</span
 167                     >
 168                   </div>
 169                 </td>
 170               </tr>
 171               <tr
 172                 md-row
 173                 md-select="cloudProvider"
 174                 md-select-id="id"
 175                 ng-repeat="cloudProvider in vm.cloudProviders.rows"
 176               >
 177                 <td md-cell ng-if="cloudProvider.userpic">
 178                   <img
 179                     class="avatar"
 180                     alt="{{cloudProvider.name}}"
 181                     ng-src="api/users/{{cloudProvider.id}}/avatar"
 182                   />
 183                 </td>
 184                 <td
 185                   md-cell
 186                   ng-if="!cloudProvider.userpic && (vm.table == 'users' || vm.table == 'agents')"
 187                 >
 188                   <img
 189                     class="avatar"
 190                     alt="{{cloudProvider.name}}"
 191                     ng-src="assets/images/avatars/profile.png"
 192                   />
 193                 </td>
 194                 <td
 195                   ng-click="vm.createOrEditCloudProvider($event, cloudProvider)"
 196                   md-cell
 197                   class="id"
 198                 >
 199                   {{cloudProvider.id}}
 200                 </td>
 201                 <td
 202                   ng-click="vm.createOrEditCloudProvider($event, cloudProvider)"
 203                   md-cell
 204                   class="name"
 205                 >
 206                   {{cloudProvider.name}}
 207                 </td>
 208                 <td
 209                   ng-click="vm.createOrEditCloudProvider($event, cloudProvider)"
 210                   md-cell
 211                   class="service"
 212                 >
 213                   {{ vm.arrayservice[cloudProvider.service].option }}
 214                 </td>
 215
 216                 <td md-cell class="actions">
 217                   <md-menu>
 218                     <md-button
 219                       class="md-icon-button"
 220                       aria-label="More"
 221                       translate
 222                       translate-attr-aria-label="SETTINGS.MORE"
 223                       ng-click="$mdMenu.open($event)"
 224                     >
 225                       <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 226                     </md-button>
 227
 228                     <md-menu-content width="3">
 229                       <!-- SUBACTIONS -->
 230
 231                       <!-- ACTIONS -->
 232
 233                       <md-menu-item>
 234                         <md-button
 235                           ng-click="vm.editdialog(cloudProvider, $event    )"
 236                           translate="SETTINGS.EDIT_CLOUDPROVIDER"
 237                         >
 238                           Edit CloudProvider
 239                         </md-button>
 240                       </md-menu-item>
 241
 242                       <!-- SUBACTIONS -->
 243
 244                       <!-- ACTIONS -->
 245
 246                       <md-menu-item>
 247                         <md-button
 248                           ng-click="vm.deleteconfirm(cloudProvider, $event    )"
 249                           translate="SETTINGS.DELETE_CLOUDPROVIDER"
 250                         >
 251                           Delete CloudProvider
 252                         </md-button>
 253                       </md-menu-item>
 254                     </md-menu-content>
 255                   </md-menu>
 256                 </td>
 257               </tr>
 258             </tbody>
 259           </table>
 260         </md-table-container>
 261
 262         <md-table-pagination
 263           md-label="{page: '{{'SETTINGS.PAGE' | translate}}:', rowsPerPage: '{{'SETTINGS.ROWSPERPAGE' | translate}}:', of: '{{'SETTINGS.OF' | translate}}'}"
 264           md-limit="vm.query.limit"
 265           md-limit-options="[10, 15, 20, 50, 100, 250]"
 266           md-page="vm.query.page"
 267           md-total="{{vm.cloudProviders.count}}"
 268           md-on-paginate="vm.getAiTools"
 269           md-page-select
 270         ></md-table-pagination>
 271       </md-card>
 272       <!-- / CLOUDPROVIDER TABLE -->
 273       <!-- NO RESULTS -->
 274
 275       <!-- / NO RESULTS -->
 276     </div>
 277     <!-- / MAIN -->
 278   </div>
 279   <!-- / CONTENT -->
 280
 281   <!-- ADD CLOUDPROVIDER BUTTON -->
 282   <md-button
 283     class="md-fab md-accent add-item-button"
 284     id="add-cloudProvider-button"
 285     ng-click="vm.createOrEditCloudProvider($event)"
 286     aria-label="add cloudProvider"
 287     translate
 288     translate-attr-aria-label="SETTINGS.ADD_CLOUDPROVIDER"
 289   >
 290     <md-icon md-font-icon="icon-plus"></md-icon>
 291   </md-button>
 292   <!-- / ADD CLOUDPROVIDER BUTTON -->
 293 </div>